<template>
	<view>
		<uni-group title="基本模式" style="margin-top: 0;">
			<view class="group-item">
				<text class="tip">公式</text>
				<text class="content">{{transformFormula(quoteInfo.formula)}}</text>
			</view>
			<view class="group-item">
				<text class="tip">长度</text>
				<text class="content">{{quoteInfo.length}}</text>
			</view>
			<view class="group-item">
				<text class="tip">宽度</text>
				<text class="content">{{quoteInfo.width}}</text>
			</view>
			<view class="group-item">
				<text class="tip">高度</text>
				<text class="content">{{quoteInfo.height}}</text>
			</view>
			<view class="group-item">
				<text class="tip">来价</text>
				<text class="content">{{quoteInfo.price}}</text>
			</view>
			<view class="group-item">
				<text class="tip">利润率</text>
				<text class="content">{{quoteInfo.profit}}</text>
			</view>
			<view class="group-item">
				<text class="tip">结果</text>
				<text class="content">{{quoteInfo.total_price}}</text>
			</view>
		</uni-group>
		<uni-group v-if="!isAdd" title="" margin-top="20">
			<view class="group-item">
				<text class="tip">客户名称</text>
				<text class="content">{{quoteInfo.custom_name}}</text>
			</view>
			<view class="group-item">
				<text class="tip">联系人</text>
				<text class="content">{{quoteInfo.custom_contact}}</text>
			</view>
			<view class="group-item">
				<text class="tip">联系电话</text>
				<text class="content">{{quoteInfo.custom_mobile_phone}}</text>
			</view>
			<view class="group-item">
				<text class="tip">材料</text>
				<text class="content">{{quoteInfo.raw}}</text>
			</view>
			<view class="group-item">
				<text class="tip">备注</text>
				<text class="content">{{quoteInfo.remark}}</text>
			</view>
		</uni-group>
		<uni-forms v-if="isAdd" class="uni-list myForm" ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="客户名称" label-width="160rpx" :required="true" name="custom_name"
				class="uni-list-cell uni-list-cell-pd">
				<input :inputBorder="false" type="text" v-model="formData.custom_name" placeholder="请填写客户名称" />
			</uni-forms-item>
			<uni-forms-item label="联系人" label-width="160rpx" :required="true" name="custom_contact"
				class="uni-list-cell uni-list-cell-pd">
				<input class="input" v-model="formData.custom_contact" type="text" placeholder="请填写联系人" />
			</uni-forms-item>
			<uni-forms-item label="联系电话" label-width="160rpx" :required="true" name="custom_mobile_phone"
				class="uni-list-cell uni-list-cell-pd">
				<input class="input" v-model="formData.custom_mobile_phone" type="number" placeholder="请填写联系电话" />
			</uni-forms-item>
			<uni-forms-item label="材料" label-width="160rpx" :required="true" name="raw"
				class="uni-list-cell uni-list-cell-pd">
				<input class="input" v-model="formData.raw" type="text" placeholder="请填写材料" />
			</uni-forms-item>
			<uni-forms-item label="备注" label-width="160rpx" name="remark" class="uni-list-cell uni-list-cell-pd">
				<input class="input" v-model="formData.remark" type="text" placeholder="请填写备注" />
			</uni-forms-item>
		</uni-forms>
		<button v-if="isAdd" class="btn" @click="submit('form')" type="primary">确认保存</button>
	</view>
</template>
<script>
	import {
		add_quotation
	} from '@/common/api.js';
	export default {
		data() {
			let userInfo = uni.getStorageSync('userInfo')
			userInfo = userInfo && JSON.parse(uni.getStorageSync('userInfo')) || {};
			return {
				isAdd: false,
				userInfo,
				formData: {
					custom_name: "",
					custom_contact: "",
					custom_mobile_phone: "",
					raw: "",
					remark: "",
				},
				quoteInfo: {},
				rules: {
					custom_name: {
						rules: [{
							required: true,
							errorMessage: '请输入客户名称',
						}]
					},
					custom_contact: {
						rules: [{
							required: true,
							errorMessage: '请输入正确的联系人',
						}]
					},
					custom_mobile_phone: {
						rules: [{
							required: true,
							errorMessage: '请输入正确的联系电话',
							// pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (!(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value))) {
									return false
								}
								return true
							}
						}]
					},
					raw: {
						rules: [{
							required: true,
							errorMessage: '请输入正确的材料',
						}]
					},
				}
			}
		},
		onLoad(options) {
			let params = options.params
			console.log(options, JSON.parse(decodeURIComponent(params)));
			this.quoteInfo = params && JSON.parse(decodeURIComponent(params)) || {}
			if (options.add && options.add == 'yes') {
				this.isAdd = true;

				uni.setNavigationBarTitle({
					title: "保存报价单" //这是修改后的导航栏文字
				})
			}
		},
		methods: {
			transformFormula: function(value) {
				console.log(value)
				return value.replace(/length/g, '长').replace(/width/g, '宽').replace(/height/g, '高').replace(/price/g, '来价');
			},
			submit(val) {
				this.$refs[val].validate().then(res => {
					add_quotation({
						...this.quoteInfo,
						...this.userInfo,
						...this.formData,
					}).then(res => {
						console.log(res);
						uni.showToast({
							icon: res.code != '200' ? 'error' : 'success',
							title: res.msg || '服务异常。'
						})
						return setTimeout(() => uni.navigateBack({
							doInit: true
						}), 1000)
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.group-item {
		display: flex;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.tip {
			width: 128rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #1A1A1A;
			line-height: 48rpx;
		}

		.content {
			flex: 1;
			margin-left: 32rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			line-height: 48rpx;
		}
	}

	.btn {
		// position: fixed;
		top: 56rpx;
		bottom: 0;
		margin: 0 34rpx 80rpx;
		width: calc(100% - 68rpx);
		z-index: 99;
	}

	.uni-forms,
	.uni-list {
		margin-top: 24rpx;

		:deep(.uni-forms-item) {
			padding-left: 16rpx;
			background-color: #fff;
			font-size: 32rpx !important;
			font-weight: 400;
			color: #1A1A1A;
			line-height: 48rpx;

			.uni-forms-item__label,
			.is-direction-left {
				padding-right: unset;
				font-size: 32rpx !important;
				font-weight: 400;
				color: #1A1A1A;
				line-height: 48rpx;
			}
		}

	}

	:deep(.uni-forms-item__content) {
		height: 40rpx;
		line-height: 40rpx;

		uni-input {
			line-height: 40rpx;
			height: 40rpx;

			.uni-input-wrapper {
				line-height: 40rpx;
				height: 40rpx;

				.uni-input-input {
					font-size: 32rpx !important;
					line-height: 40rpx;
				}
			}
		}
	}

	.uni-input-placeholder {
		font-size: 32rpx !important;
		line-height: 40rpx;
	}
</style>